<template>
  <div class="car">
    <div class="top">
      <h1>购物车</h1>
      <div class="top1">
        <span class="quan">领券</span>
        <span
          class="quan1"
          @click="editable = !editable"
          style="user-select: none"
          >编辑</span
        >
      </div>
    </div>
    <div class="center">
      <div class="middle">
        <div v-if="flag" class="pin">
          <div class="shang" v-for="item in datas" :key="item.goods_id">
            <div class="xianshi">
              <span class="timingTag">限时抢购中</span>
              <span class="finish">距优惠结束</span>
              <span class="day">1天4小时</span>
            </div>
            <van-card :price="item.goods_price" :title="item.goods_name">
              <template #thumb type="flex">
                <van-row>
                  <van-col span="8">
                    <van-checkbox
                      style="margin-top: 18px"
                      :value="selectAll.includes(item.goods_id)"
                      @click="selectItem(item.goods_id)"
                    ></van-checkbox>
                  </van-col>
                  <van-col span="16">
                    <van-image
                      width="60"
                      height="60"
                      :src="item.goods_small_logo"
                    />
                  </van-col>
                </van-row>
              </template>
              <template #num>
                <van-stepper
                  v-model="item.goods_num"
                  :name="item.cart_id"
                  @change="edit"
                />
              </template>
            </van-card>
            <div class="zi">
              <img src="../assets/home/jiantou.png" alt="" />
              <span>自营仓商品满99免邮</span>
            </div>
            <van-divider
              :style="{
                borderColor: '#ccc',
                padding: '0 16px',
              }"
            >
            </van-divider>
          </div>
        </div>
        <div v-else>
          <img
            src="../assets/home/cart.gif"
            style="width: 340px; height: 300px"
            alt=""
          />
        </div>
      </div>
    </div>
    <van-submit-bar
      class="bott"
      :price="totalPrice"
      button-text="去结算"
      @submit="Submit"
    >
      <van-checkbox v-model="checkAll">全选</van-checkbox>
      <template #button v-if="editable">
        <van-button
          class="bo"
          round
          icon="delete-o"
          style="width: 110px"
          type="danger"
          @click="removeItem"
          >删除所选</van-button
        >
      </template>
    </van-submit-bar>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Cart",
  data() {
    return {
      num: 1,
      editable: false,
      datas: [],
      selectAll: [],
      flag: true,
      selectlist: [],
    };
  },
  created() {
    this.getCart();
  },
  methods: {
    Submit() {
      if (!this.selectAll.length == 0) {
        this.selectlist = this.datas.filter((item) => {
          return this.selectAll.includes(item.goods_id);
        });
        this.$router.push({
          name: "Confirmorder",
          params: {
            cartlist: this.selectlist,
          },
        });
      } else {
        this.$toast("您还没有选择商品哦");
        return;
      }
    },

    async getCart() {
      const {
        data: { data },
      } = await this.$request.get("/api/cart/" + this.userinfo.user_id);
      this.datas = data;
      // localStorage.setItem("cartlist", JSON.stringify(this.datas));
      if (this.datas.length === 0) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
    selectItem(id) {
      const idx = this.selectAll.indexOf(id);
      if (idx >= 0) {
        this.selectAll.splice(idx, 1);
      } else {
        this.selectAll.push(id);
      }
    },
    ...mapMutations("cart", ["removeFromCart"]),
    async removeItem() {
      if (this.selectAll.length === 0) {
        this.$toast("请选择商品");
        return;
      } else {
        const { data } = await this.$request.delete(
          "/api/cart/" + this.userinfo.user_id,
          {
            params: {
              goods_id: this.selectAll.join(),
            },
          }
        );

        this.removeFromCart(this.selectAll);
        this.selectAll = [];
        this.editable = false;
        this.getCart();
      }

      // 删除本地存储
    },
    async edit(value, detail) {
      console.log(value, detail);
      const { data } = await this.$request.put("/api/cart/" + detail.name, {
        user_id: this.userinfo.user_id,
        goods_num: value,
      });
      this.getCart();
    },
    async commit() {},
  },
  computed: {
    ...mapState("user", ["userinfo"]),
    checkAll: {
      get() {
        return this.datas.every((item) => {
          return this.selectAll.includes(item.goods_id);
        });
      },
      set(checked) {
        this.selectAll = checked ? this.datas.map((item) => item.goods_id) : [];
      },
    },

    totalPrice() {
      return (
        100 *
        this.datas.reduce((pre, item) => {
          if (this.selectAll.includes(item.goods_id)) {
            return pre + item.total;
          } else {
            return pre;
          }
        }, 0)
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 0 15px;
  h1 {
    font-size: 17px;
    font-weight: 400;
  }
  .top1 {
    .quan {
      margin-right: 16px;
      font-size: 14px;
      color: #dd1a21;
    }
  }
}
.center {
  background-color: #f5f5f5;
  // height: calc(100vh - 155px);
  margin-bottom: 102px;

  .middle {
    padding: 20px 20px 0 20px;
  }
  .pin {
    background-color: white;
    .xianshi {
      text-align: left;
      padding-left: 45px;
      padding-top: 10px;
      .timingTag {
        font-size: 10px;
        padding: 2px;
        border: 0.01rem solid #f48f18;
        color: #f48f18;
      }
      .finish {
        font-size: 10px;
        margin: 0 3px 0 5px;
      }
      .day {
        font-size: 10px;
        font-weight: 900;
      }
    }
    .van-card {
      background-color: #fff;
      .van-card__content {
        text-align: left;
      }
      .check {
        margin-top: 20px;
      }
    }
    .zi {
      text-align: left;
      padding-left: 45px;
      margin-bottom: 12px;
      img {
        width: 10px;
        height: 10px;
        vertical-align: middle;
        margin-right: 4px;
      }
      span {
        font-size: 10px;
        vertical-align: middle;
      }
    }
  }
}
.bott {
  bottom: 50px;
}
.bott::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleY(0.5);
}
.bo {
  width: 110px;
  height: 40px;
}
</style>
